<template>
  <!-- 底部导航栏组件，提供主要功能页面的快速访问 -->
  <div class="bottom-navigation">
    <!-- 修炼页面导航项 -->
    <div 
      class="nav-item" 
      :class="{ active: $route.path === '/character' }"
      @click="goTo('/character')"
    >
      <div class="nav-icon">
        <User />
      </div>
      <span class="nav-text">修炼</span>
    </div>
    
    <!-- 探索页面导航项 -->
    <div 
      class="nav-item" 
      :class="{ active: $route.path === '/map' }"
      @click="goTo('/map')"
    >
      <div class="nav-icon">
        <Location />
      </div>
      <span class="nav-text">探索</span>
    </div>
    
    <!-- 首页导航项 -->
    <div 
      class="nav-item" 
      :class="{ active: $route.path === '/' }"
      @click="goTo('/')"
    >
      <div class="nav-icon">
        <House />
      </div>
      <span class="nav-text">首页</span>
    </div>
    
    <!-- 背包页面导航项 -->
    <div 
      class="nav-item" 
      :class="{ active: $route.path === '/inventory' }"
      @click="goTo('/inventory')"
    >
      <div class="nav-icon">
        <Box />
      </div>
      <span class="nav-text">背包</span>
    </div>
    
    <!-- 设置页面导航项 -->
    <div 
      class="nav-item" 
      :class="{ active: $route.path === '/settings' }"
      @click="goTo('/settings')"
    >
      <div class="nav-icon">
        <Setting />
      </div>
      <span class="nav-text">设置</span>
    </div>
  </div>
</template>

<script>
// 导入路由功能
import { useRouter } from 'vue-router'
// 导入Element Plus图标组件
import { User, Location, House, Box, Setting } from '@element-plus/icons-vue'

export default {
  name: 'BottomNavigation',
  // 注册使用的图标组件
  components: {
    User,
    Location,
    House,
    Box,
    Setting
  },
  setup() {
    // 获取路由实例
    const router = useRouter()
    
    // 页面跳转方法
    const goTo = (path) => {
      router.push(path)
    }
    
    return {
      goTo
    }
  }
}
</script>

<style scoped>
/* 底部导航栏样式 */
.bottom-navigation {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 60px;
  background-color: #fff;
  display: flex;
  justify-content: space-around;
  align-items: center;
  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
  z-index: 1000;
}

/* 导航项样式 */
.nav-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100%;
  cursor: pointer;
  color: #666;
}

/* 激活状态的导航项样式 */
.nav-item.active {
  color: #409eff;
}

/* 导航图标样式 */
.nav-icon {
  font-size: 20px;
  margin-bottom: 2px;
}

/* 图标SVG样式 */
.nav-icon svg {
  width: 20px;
  height: 20px;
}

/* 导航文字样式 */
.nav-text {
  font-size: 12px;
}

/* 移动端适配 */
@media screen and (max-width: 768px) {
  .bottom-navigation {
    height: 50px;
  }
  
  .nav-icon {
    font-size: 18px;
  }
  
  .nav-icon svg {
    width: 18px;
    height: 18px;
  }
  
  .nav-text {
    font-size: 10px;
  }
}
</style>